﻿(function ($j) {
    $j.dssOptionsList = [];
    $j.fn.divSlideShow = function (customOptions) {
        var options = {
            width: 251,
            height: 100,
            arrow: "begin",
            delay: 10000,
            loop: 1,
            leftArrowClass: "",
            rightArrowClass: "",
            slideContainerClass: "",
            controlClass: "",
            controlActiveClass: "",
            controlHoverClass: "",
            controlContainerClass: "",
            separatorClass: ""

        };
        if (customOptions)
            $j.extend(options, customOptions);
        for (var key in options)
            $j.dssOptionsList.push(key);
        if (options.loop > 30) options.loop = 30;
        return this.each(function () {
            for (key in options) $j(this).attr(key, options[key])
            $j.divSlideShow(this);
        });
    };

    $j.divSlideShow = function (slideShow) {
        var options = $j.divSlideShow.getOptionsObject(slideShow)
        var numSlide = $j(slideShow).children('.slide').length;
        $j(slideShow).css({ 'width': options.width, 'overflow': 'hidden', 'display': 'block' });
        $j(slideShow).children()
			.wrap('<div class="dssSlide"></div>')
        $j(slideShow).children('.dssSlide').wrapAll('<div class="dssSlideContainer" page=0 max=' + numSlide + '/>');
        $j(slideShow).find('.dssSlide')
			.css({ 'float': 'left', 'width': options.width, 'height': options.height, 'overflow-y': 'auto' });

        // Add 2 Arrows
        var leftArrow = '<div class="dssControl" direction="-1" title="Trước"><span class="' + options.leftArrowClass + '"><img src="/widget/img/btn_prev_lamsao.gif" alt="" /></span></<div>';
        var rightArrow = '<div class="dssControl" direction="1" title="Tiếp" style="margin-left: 1px;"><span class="' + options.rightArrowClass + '"><img src="/Widget/IMG/btn_next_lamsao.gif" alt="" /></span></<div>';

        $j(slideShow).append('<div class="dssSeparator"></div>').find('.dssSeparator').addClass(options.separatorClass);

        if (options.arrow == "begin") {
            $j(slideShow).append(leftArrow);
            $j(slideShow).append(rightArrow);
        }
        if (options.arrow == "split")
            $j(slideShow).append(rightArrow);
        if (options.arrow == "split")
            $j(slideShow).append(leftArrow);

        // Add Number
        //        for (var i = 0; i < numSlide; i++)
        //            $j(slideShow).append('<div class="dssControl" page=' + i + '>' + (i + 1) + '</div>');


        if (options.arrow == "end") {
            $j(slideShow).append(leftArrow);
            $j(slideShow).append(rightArrow);
        }
        $j(slideShow).find('.dssSlideContainer').css({ 'width': options.width * numSlide, 'height': options.height, 'overflow': 'hidden' }).addClass(options.slideContainerClass);
        $j(slideShow).find('.dssControl')
			.addClass(options.controlClass)
        //.css('float', 'left')
			.hover(function () { $j(this).toggleClass(options.controlHoverClass); })
			.wrapAll('<div class="dssControlContainer"/>');
        $j(slideShow).find('.dssControlContainer')
			.css({ 'height': '100%', 'overflow': 'hidden' })
			.addClass(options.controlContainerClass);

        //auto-slide: queue a sequence of animation with delay
        for (i = 1; i <= Math.floor(numSlide * options.loop); i++) {
            var p = i;
            if (p == numSlide) p = 0;
            $j(slideShow).find('.dssSlideContainer').delay(options.delay);
            $j.divSlideShow.slideTo(slideShow, p % numSlide, true);
        }
        //initialize controls look
        $j.divSlideShow.manageControls(slideShow, 0);

        //controls click handler
        $j(slideShow).find('.dssControl').click(function () {
            //get max pages
            var max = $j(slideShow).find('.dssSlideContainer').children().length;
            //get target page
            var dir = parseInt($j(this).attr('direction'));
            if (dir) //left or right arrow
            {
                var currentPage = parseInt($j(slideShow).find('.dssSlideContainer').attr('page'));
                var gotoPage = (currentPage + dir <= max && currentPage + dir >= -1) ? currentPage + dir : currentPage;
                if (gotoPage == max) gotoPage = 0; // Dang o 0 thi quay den MAX
                if (gotoPage == -1) gotoPage = max; // Dang o MAX thi quay ve 0
            }
            else //numbers
                var gotoPage = parseInt($j(this).attr('page'));
            //go~
            $j.divSlideShow.slideTo(slideShow, gotoPage);
        });
    };


    $j.divSlideShow.slideTo = function (slideShow, gotoPage, queue) {
        //remove auto-slide
        if (!queue)
            $j(slideShow).find('.dssSlideContainer').clearQueue();

        var options = $j.divSlideShow.getOptionsObject(slideShow)

        //validate gotoPage
        var max = $j(slideShow).find('.dssSlideContainer').children().length;
        if (gotoPage >= max)
            gotoPage = max - 1;
        if (gotoPage < 0)
            gotoPage = 0;

        //get width
        var width = $j(slideShow).find('.dssSlideContainer .dssSlide').width();
        //manage control look and store current page as attribute, to be executed just before animation
        $j(slideShow).find('.dssSlideContainer').queue(function () {
            $j.divSlideShow.manageControls(slideShow, gotoPage);
            $j(this).attr('page', gotoPage);
            $j(this).dequeue();
        });

        //animate
        $j(slideShow).find('.dssSlideContainer').animate({ 'margin-left': -gotoPage * width });

    };

    $j.divSlideShow.getOptionsObject = function (slideShow) {
        var options = {};
        var optionsList = $j.dssOptionsList;
        for (var i in optionsList) {
            var attribute = $j(slideShow).attr(optionsList[i]);
            if (isNaN(parseInt(attribute)))
                options[optionsList[i]] = attribute;
            else
                options[optionsList[i]] = parseInt(attribute);
        }
        return options;
    }


    $j.divSlideShow.manageControls = function (slideShow, page) {
        var options = $j.divSlideShow.getOptionsObject(slideShow)
        var max = $j(slideShow).find('.dssSlideContainer').children().length;

        $j(slideShow).find('.dssControl').each(function () {
            if ($j(this).attr('direction') == '1')//right arrow
            {
                /*if( page < max - 1 )
                $j(this).css('visibility','visible');
                else 
                $j(this).css('visibility','hidden');*/
            }
            else if ($j(this).attr('direction') == '-1')//left arrow
            {
                /*if( page > 0 )
                $j(this).css('visibility','visible');
                else 
                $j(this).css('visibility','hidden');*/
            }
            else//number
            {
                if ($j(this).attr('page') != page)
                    $j(this).toggleClass(options.controlActiveClass, false);
                else
                    $j(this).toggleClass(options.controlActiveClass, true);
            }
        });
    };

})(jQuery);